<template>
  <div class="right-container">
    <div id="wirvideo"></div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import PreviewOCX from "@/utils/PreviewClass.js";
@Component
export default class extends Vue {
  PreviewOCX: any = null;
  mounted() {
    let ocx = this.init();
    ocx.setWindowsLayout(1);
    ocx.setTokenCallEvent(this.tokenCallEvent.bind(this));
    ocx.setCallBack();
  }

  // 初始化视频插件
  init() {
    let ocx = (this.PreviewOCX = new (PreviewOCX as any)({
      divId: "wirvideo",
      theme: "",
    }));
    return ocx;
  }

  // 播放视频列表
  shipinData = {
    stationId: "",
    list: [
      {
        yzwbm: "",
        indexCode: "",
        stationId: "",
      },
    ],
  };
  @Watch("shipinData")
  setPreview(shipinData) {
    let ocx = this.PreviewOCX;
    // console.log(ocx.windowNumber);
    let list = shipinData.list.slice(0, ocx.windowNumber);
    list.forEach((v) => {
      this.getPreview(v);
    });
  }
  // 获取视频流
  async getPreview(data) {
    // let data = {
    //   indexCode: "001246",
    //   stationId: "100435539",
    // };
    console.log(data);

    await (this as any).$services
      .getPreview({ data, dataType: "text" })
      .then((xml: any) => {
        // if (xml) {
        let ocx = this.PreviewOCX;
        var winindex = ocx.getSelectWindow();
        // console.log(
        //   "winindex:" + winindex,
        //   "ocx.startPreview(winindex, xml):" + ocx.startPreview(winindex, xml)
        // );

        if (ocx.startPreview(winindex, xml) === 0) {
          if (data.yzwbm) {
            this.ptzGetPoint(data.yzwbm, this.PreviewOCX.PTZ_CMD_START);
          }
          if (ocx.setSelectWindow(winindex + 1) === -1) {
            ocx.setSelectWindow(0);
          }
        }
        // } else {
        //   this.$message.warning("没有找到对应的播放点！");
        // }

        return true;
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  setYzw(yzwBm) {
    if (this.ptzSetPoint(yzwBm, this.PreviewOCX.PTZ_CMD_START) == 0) {
      console.log("预置位设置成功");
    } else {
      console.log("预置位设置失败");
    }
  }

  //云台预置点设置
  ptzSetPoint(pointIndex, action) {
    var xml = [];
    xml.push('<?xml version="1.0" encoding="utf-8"?>');
    xml.push("<PtzControl>");
    xml.push("<Action>" + action + "</Action>");
    xml.push("<Priority>50</Priority>");
    xml.push("<Speed>5</Speed>");
    xml.push("<Preset Index =" + pointIndex + " DwellTime=50 Speed=5 />");
    xml.push("</PtzControl>");
    if (
      this.PreviewOCX.ptzControl(
        this.PreviewOCX.PRESET_CMD_SET_PRESET,
        xml.join("")
      ) == this.PreviewOCX.SUCCESS
    ) {
      return this.PreviewOCX.SUCCESS;
    } else {
      return this.PreviewOCX.FAILED;
    }
  }
  // 转动到预置位
  ptzGetPoint(pointIndex, action) {
    console.log(123, pointIndex);
    var xml = [];
    xml.push('<?xml version="1.0" encoding="utf-8"?>');
    xml.push("<PtzControl>");
    xml.push("<Action>" + action + "</Action>");
    xml.push("<Priority>50</Priority>");
    xml.push("<Speed>5</Speed>");
    xml.push("<Preset Index =" + pointIndex + " DwellTime=50 Speed=5 />");
    xml.push("</PtzControl>");
    if (
      this.PreviewOCX.ptzControl(
        this.PreviewOCX.PRESET_CMD_GOTO_PRESET,
        xml.join("")
      ) == this.PreviewOCX.SUCCESS
    ) {
      console.log("预置位调用成功");
      return this.PreviewOCX.SUCCESS;
    } else {
      console.log("预置位调用失败");
      return this.PreviewOCX.FAILED;
    }
  }
  tokenCallEvent(reqID) {
    let data = {
      // stationId: "100435539",
      stationId: this.shipinData.stationId,
    };
    (this as any).$services
      .getTokens({ data, dataType: "text" })
      .then((result: any) => {
        // console.log(123, result);
        this.PreviewOCX.setToken(reqID, result);
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
}
</script>

<style lang="scss" scoped>
.right-container {
  width: 100%;
  height: 100%;
  // background: rgba(0, 0, 0, 0.9);
  position: relative;
  #wirvideo {
    width: 100%;
    height: 100%;
  }
  .iframe {
    width: 100%;
    height: 10%;
    position: absolute;
    top: 50px;
    left: 0px;
    z-index: 1;
    // opacity: 0;
    background: none;
    // display: none;
  }
}
</style>

